<template>
<div class="wraper" style="height: 100%">
  <div class="container">
    <div class="main-content">
      <div class="row justify-content-md-center">
        <div class="col col-2">
          <img src="http://www.mdpi.com/img/design/mdpi-pub-logo.png?13cf3b5bd783e021" alt="logo" title="MDPI Open Access Journals" style="width: 100%; max-width: 200px !important; height: auto;">
        </div>
        <div class="col col-7 align-middle">
          <form class="form-inline align-middle " style="height:100%">
            <div class="form-group mx-1 col-sm-8">
              <label for="inputPassword2" class="form-control-sm">Author / Affiliation</label>
              <input type="password" class=" col-sm-8 form-control mx-2 form-control-sm" id="inputPassword2" placeholder="Enter What You Are Looking For">
            </div>
            <button type="submit" class="btn btn-outline-dark btn-sm col-sm-2" style="margin-left:-20px">Search</button>
          </form>
        </div>
        <div class="col col-3">
          <div class="row justify-content-md-center align-items-center right-clearfix" style="height: 100%;line-height: 100%; margin-right:10px">
              <div class="col col-sm-4 item">
                Login
              </div>
              <div class="col col-sm-4 item">
                Register
              </div>
              <div class="col col-sm-4 item">
                Submit
              </div>
          </div>
        </div>
      </div>
      <IndexContent></IndexContent>

    </div>
  </div>
</div>
</template>

<script>
import IndexContent from './index_content.vue'
export default {
  components: {
    IndexContent
  }
}
</script>

<style lang="css" scoped>
@media (min-width: 1200px){
  .container {
      max-width: 1540px;
  }
}

.logo{
  background-color: white
}
.main-content{
  background-color: white;
  padding: 1em 1em
}
.right-clearfix .item{
  vertical-align: middle;

  display: table-cell;
  text-align: center;
}
.right-clearfix .item{
  color: #343a40;
  transition: all 0.3s;
}
.right-clearfix .item:hover{
  background-color: #343a40;
  color: white;
}
</style>
